import React, { createRef, useRef, useState, useEffect, useLayoutEffect } from 'react';
function Counter() {
  const countRef = useRef();
  const [count, setCount] = useState(0);
  useEffect(() => {
    //定义一个副作用函数，当页面渲染完成后会执行，把最新的count值赋给counterRef.current
    countRef.current = count;
  }, [count]);
  const handleAlert = () => {
    setTimeout(() => {
      alert(countRef.current)
    }, 3000)
  }
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count => count + 1)}>+</button>
      <button onClick={handleAlert}>alert</button>
    </div>
  )
}

export default Counter;
